<template>
  <div class="device flex-column">
    <div class="tools flex-between">
      <div class="left flex-wrap">
        <div class="parmas-btn flex-box"
             :class="{'selected':btnChooseList.includes(btn.value)}"
             v-for="btn in btnList" @click="paramsBtnClick(btn.value)">
          <img :src="btn.icon" alt="">
          <span>{{btn.name}}</span>
        </div>
      </div>
      <div class="right flex-box"  v-if="params.type !== 'experimental'">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          value-format="timestamp"
          range-separator="-"
          format="yyyy-MM-dd"
          start-placeholder="开始时间"
          end-placeholder="结束时间">
        </el-date-picker>
        <el-button type="primary" class="ml-20" :loading="loading" @click="handleSearch">搜索</el-button>
      </div>
    </div>
    <div class="chart-container" v-if="chartDisplayList.length">
      <div class="chart" v-for="chart in chartDisplayList" :id="chart.id"></div>
    </div>
    <div class="no-data mt-100"  v-else>
      暂无数据
    </div>

    <div class="table-container">
<!--      <div class="tb-title">谐波分析</div>-->

    </div>
  </div>
</template>
<script>
  import {energyData,harmonicsData} from '../../../../api/api'
  import moment from 'moment'
  const colors = [
    '#8FBCFA','#1FC4FD','#E29A91','#6df5ff','#fff0ba','#cbb2ff'
  ]
  export default {
    name:'device',
    props:{
      params:{
        type:Object,
        default:()=>{}
      }
    },
    computed:{
      datePickerOptions(){
        return {
          disabledDate(time) {
            return time.getTime() > Date.now();
          }
        }
      },
      chartDisplayList(){
        return this.chartsList.filter(o=>{
          return this.btnChooseList.includes(o.id)
        })
      }
    },
    data(){
      return{
        btnChooseList:['shuibiao','yongdian','dianliu','dianya'],
        dateRange:[],
        btnList:[
          {
            name:'水表',
            icon:require('../../../../assets/imgs/icon/shuibiao.png'),
            value:'shuibiao'
          },{
            name:'用电',
            icon:require('../../../../assets/imgs/icon/yongdian.png'),
            value:'yongdian'
          },
          {
            name:'电流',
            icon:require('../../../../assets/imgs/icon/dianliu.png'),
            value:'dianliu'
          },{
            name:'电压',
            icon:require('../../../../assets/imgs/icon/dianya.png'),
            value:'dianya'
          }
        ],
        option:{
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              lineStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0,
                    color: 'rgba(0, 255, 233,0)'
                  }, {
                    offset: 0.5,
                    color: 'rgba(255, 255, 255,1)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 255, 233,0)'
                  }],
                  global: false
                }
              },
            },
          },
          grid: {
            top: 60,
            right: 70,
            bottom: 25,
            left: 70,
          },
          xAxis: {
            type: 'category',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3E4F64'
              }
            },

            axisLabel: {
              color: '#ECF0FF',
              fontSize:18
            },
            splitLine: {
              show: false
            },
            boundaryGap: false,
            data: [],

          },
          // legend:{
          //   right:20,
          //   top:20,
          //   textStyle:{
          //     color:'#fff',
          //     fontSize:19
          //   },
          //   data:[]
          // },
          yAxis: [{
            type: 'value',
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(119, 169, 185, 0.25)'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#3E4F64'
              }
            },
            axisLabel: {
              show: true,
              color: '#ECF0FF',
              fontSize:18
            },
            axisTick: {
              show: true,
            },
          }],
          series: []
        },
        chartsList:[],
        loading:false
      }
    },
    methods:{
      handleSearch(){
        if(this.loading) return
        if(this.dateRange && this.dateRange.length){
          this.params.startTime = this.dateRange[0];
          this.params.endTime = this.dateRange[1];
        }else {
          this.params.startTime = ''
          this.params.endTime = ''
        }
        this.getData()
      },
      paramsBtnClick(val){
        if(this.btnChooseList.includes(val)){
          const index = this.btnChooseList.findIndex(o=>{
            return o===val
          })
          this.btnChooseList.splice(index,1)
        }else {
          this.btnChooseList.push(val)
        }

        this.$nextTick(()=>{
          this.chartDisplayList.forEach(o=>{
            o.chart = this.$echarts.init(
              document.getElementById(o.id)
            )
            o.chart.setOption(o.option, true)
          })
        })
      },
      getData(){
        this.loading = true
        const params1 = {
          endTime:this.params.endTime,
          startTime:this.params.startTime,
        }
        const prams2 = {
          endTime:this.params.endTime,
          startTime:this.params.startTime,
          current:1,
          size:4
        }
        Promise.all([energyData(params1),]).then(res=>{
          this.setElectricDl(res[0].electricDetailVOS) //电流
          this.setElectricDy(res[0].electricDetailVOS) //电压
          this.setEnergyData(res[0].waterInfoVOs,'shuibiao') //水表
          this.setEnergyData(res[0].electricInfoVOs,'yongdian') // 电表
          this.$nextTick(()=>{
            this.chartsList.forEach(o=>{
              o.chart =  this.$echarts.init(
                document.getElementById(o.id)
              )
              o.chart.setOption(o.option, true)
            })
          })

          this.loading = false
        }).catch(err=>{
          this.loading = false
        })


        // harmonicsData(prams2).then(res=>{
        //   console.log(res)
        // })
      },
      setEnergyData(data,id){
        let legend = [],xAxis = [],series = [],option = _.cloneDeep(this.option);
        data.forEach(item=>{
          // if(!legend.length){
          //   legend = item.environmentVOs.map(en=>{
          //     return en.deviceName
          //   })
          // }
          xAxis.push(moment(item.collectionDate).format('HH:mm'))
          if(!series.length){
            series = item.statisticsInfo.map((vo,vi)=>{
              return {
                name: vo.deviceName,
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: false,
                // symbol: 'image://./static/images/guang-circle.png',
                symbolSize:0,
                lineStyle: {
                  normal: {
                    color: colors[vi],
                    width:2
                  },
                },
                itemStyle: {
                  color: colors[vi],
                  borderColor: colors[vi],
                  borderWidth: 3,
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 2,
                  shadowOffsetX: 2,
                },


                data: [Number(vo.dosage)]
              }
            })
          }else {
            series.forEach((ser,serIdx)=>{
              ser.data.push(Number(item.statisticsInfo[serIdx].dosage))
            })
          }
        })
        option.xAxis.data = xAxis;
        option.series = series;
        this.chartsList.push({
          id,
          option,
          chart:null
        })
      },
      setElectricDl(data){
        let legend = [],xAxis = [],series = [],option = _.cloneDeep(this.option);
        data.forEach((item)=>{
          xAxis.push(moment(item.collectionDate).format('HH:mm'))
          const arr = item.environmentVOs.map(o=>{
            return [
              {
                name:`${o.deviceName}-A项电流`,
                value:o.acurrent
              },{
                name:`${o.deviceName}-B项电流`,
                value:o.bcurrent
              },{
                name:`${o.deviceName}-C项电流`,
                value:o.ccurrent
              }
            ]
          }).flat()
          if(!series.length){
            series = arr.map((vo,vi)=>{
              return {
                name: vo.name,
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: false,
                // symbol: 'image://./static/images/guang-circle.png',
                symbolSize:0,
                lineStyle: {
                  normal: {
                    color: colors[vi],
                    width:2
                  },
                },
                itemStyle: {
                  color: colors[vi],
                  borderColor: colors[vi],
                  borderWidth: 3,
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 2,
                  shadowOffsetX: 2,
                },
                data: [vo.value]
              }
            })
          }else {
            arr.forEach((a,ai)=>{
              series[ai].data.push(a.value)
            })
          }
        })
        option.xAxis.data = xAxis;
        option.series = series;
        this.chartsList.push({
          id:'dianliu',
          option,
          chart:null
        })

      },
      setElectricDy(data){
        let legend = [],xAxis = [],series = [],option = _.cloneDeep(this.option);
        data.forEach((item)=>{
          xAxis.push(moment(item.collectionDate).format('HH:mm'))
          const arr = item.environmentVOs.map(o=>{
            return [
              {
                name:`${o.deviceName}-A项电压`,
                value:o.avoltage
              },{
                name:`${o.deviceName}-B项电压`,
                value:o.bvoltage
              },{
                name:`${o.deviceName}-C项电压`,
                value:o.cvoltage
              }
            ]
          }).flat()
          if(!series.length){
            series = arr.map((vo,vi)=>{
              return {
                name: vo.name,
                type: 'line',
                smooth: true, //是否平滑
                showAllSymbol: false,
                // symbol: 'image://./static/images/guang-circle.png',
                symbolSize:0,
                lineStyle: {
                  normal: {
                    color: colors[vi],
                    width:2
                  },
                },
                itemStyle: {
                  color: colors[vi],
                  borderColor: colors[vi],
                  borderWidth: 3,
                  shadowColor: 'rgba(0, 0, 0, .3)',
                  shadowBlur: 0,
                  shadowOffsetY: 2,
                  shadowOffsetX: 2,
                },
                data: [vo.value]
              }
            })
          }else {
            arr.forEach((a,ai)=>{
              series[ai].data.push(a.value)
            })
          }
        })
        option.xAxis.data = xAxis;
        option.series = series;
        this.chartsList.push({
          id:'dianya',
          option,
          chart:null
        })

      },
    },
    mounted () {
      // this.getChartsList()
    }
  }
</script>
<style lang="scss" scoped>
  .device{
    height: 100%;
    padding:20px;
    .tools{
      align-items: flex-start;
      padding: 0 90px 0 0;
      .left{
        width: 60%;
        padding: 0 67px 0 17px;
        .parmas-btn{
          background: url("../../../../assets/imgs/params_btn_bg.png")no-repeat;
          background-size: 100% 100%;
          padding: 9px 18px;
          color: #fff;
          font-size: 22px;
          cursor: pointer;
          &.selected{
            background: url("../../../../assets/imgs/params_btn_select_bg.png")no-repeat;
            background-size: 100% 100%;
          }
          img {
            width: 18px;
            margin-right: 10px;
          }
        }
        .parmas-btn+.parmas-btn{
          margin-left: 33px;
        }
        .parmas-btn:nth-of-type(n+7){
          margin-left: 0;
          margin-top: 35px;
        }
        .parmas-btn:nth-of-type(n+8){
          margin-left:33px;
          margin-top: 35px;
        }
      }
      .right{
        margin-left: 146px;
      }
    }
    .chart-container{
      margin-top: 20px;
      min-height: 0;
      overflow-y: scroll;
      width: 100%;
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(2,1fr);
      .chart{
        height: 350px;
      }
    }
    .table-container{
      .tb-title{
        font-size: 28px;
        font-style: italic;
        color: #fff;
        font-weight: bold;
      }
    }
  }
</style>
